﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EdgleyDesign10.Web.Templates.Project.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript"></script>
    <%--http://brandonaaron.net/javascripts/plugins/mousewheel.js--%>
    
    <script type="text/javascript">

        var imgIds = [];
        var sliderUse= false;
        $(document).ready(function() {
            var arThumbImages = $('#scroll-content img');

            totalImageCount = $(arThumbImages).length;

            //slider stuff start
            //change the main div to overflow-hidden as we can use the slider now
            //$("#scroll-pane").css('overflow', 'hidden');

            //calculate the height that the scrollbar handle should be
            var difference = $("#scroll-content").height() - $("#scroll-pane").height(); //eg it's 200px longer 
            var proportion = difference / $("#scroll-content").height(); //eg 200px/500px
            var handleHeight = Math.round((1 - proportion) * $("#scroll-pane").height()); //set the proportional height

            //set up the slider	
            if (totalImageCount > 11) {
                $("#slider-vertical").slider({
                    orientation: "vertical",
                    range: "max",
                    min: 0,
                    max: 100,
                    value: 100,
                    slide: function(event, ui) {
                        var topValue = -((100 - ui.value) * difference / 100);
                        $("#scroll-content").css({ top: topValue }); //move the top up (negative value) by the percentage the slider has been moved times the difference in height
                    }
                });
                //set the handle height and bottom margin so the middle of the handle is ine line with the slider
                $(".ui-slider-handle").css({ height: handleHeight, 'margin-bottom': -0.5 * handleHeight });

                var origSliderHeight = $("#slider-vertical").height(); //read the original slider height
                var sliderHeight = origSliderHeight - handleHeight; //the height through which the handle can move needs to be the original height minus the handle height
                var sliderMargin = (origSliderHeight - sliderHeight) * 0.5; //so the slider needs to have both top and bottom margins equal to half the difference
                $(".ui-slider").css({ height: sliderHeight, 'margin-top': sliderMargin }); //set the slider height and margins

                sliderUse = true;
            }


            //additional code for mousewheel
            if (sliderUse == true) { 
            $(document).mousewheel(function(event, delta) {
                var speed = 5;
                var sliderVal = $("#slider-vertical").slider("value"); //read current value of the slider

                sliderVal += (delta * speed); //increment the current value

                $("#slider-vertical").slider("value", sliderVal); //and set the new value of the slider

                var topValue = -((100 - sliderVal) * difference / 100); //calculate the content top from the slider position

                if (topValue > 0) topValue = 0; //stop the content scrolling down too much
                if (Math.abs(topValue) > difference) topValue = (-1) * difference; //stop the content scrolling up too much

                $("#scroll-content").css({ top: topValue }); //move the content to the new position
                event.preventDefault(); //stop any default behaviour
            });
        }
            //slider stuff end

            $(document).keydown(function(e) {
                if (e.keyCode == 39 || e.keyCode == 40) {
                    var tid = parseFloat($("img.main").attr("id").substring(10));
                    limit = totalImageCount - 1;
                    if (tid == limit) {
                        tid = 0;
                    } else {
                        tid = tid + 1
                    }
                    loadMainImage(tid);
                }
                if (e.keyCode == 37 || e.keyCode == 38) {
                    var tid = parseFloat($("img.main").attr("id").substring(10));
                    limit = totalImageCount - 1;
                    if (tid == 0) {
                        tid = limit;
                    } else {
                        tid = tid - 1
                    }
                    loadMainImage(tid);
                }
            });

            iOne = $(arThumbImages[1]).attr('src');

            for (var i = 0; i < totalImageCount; i++) {

                var hashes = $(arThumbImages[i]).attr('src').slice($(arThumbImages[i]).attr('src').indexOf('?') + 1).split('&');
                hash = hashes[0].split('=');
                imgIds.push(hash[1]);
            };


            currentImage = 0;

            var imgCount = 0
            $('#scroll-content img').each(function() {
                $(this).attr('id', 'galleryThumb_' + imgCount);
                imgCount++;
            });

            loadMainImage(0);

            $("#scroll-content img").click(function() {
                //if alread slected do nothing
                if ($(this).hasClass("active")) { return; }
                var tid = parseFloat($(this).attr("id").substring(13));
                loadMainImage(tid);

            })

            $("img.main").click(function() {
                var tid = parseFloat($(this).attr("id").substring(10));
                limit = totalImageCount - 1;
                if (tid == limit) {
                    tid = 0;
                } else {
                    tid = tid + 1
                }
                loadMainImage(tid);
            });
        });

        function loadMainImage(id) {

            id = parseInt(id);
            //var newImg = new Image();
            var newImgSrc = "http://www.edgleydesign.co.uk/File.aspx?Id=" + imgIds[id] + "&width=&height=500";
            //var mainImg = $("#image_wrap img.main").fadeTo("slow", 0);
            $(".main").parent().addClass("loading");

            $(".main").fadeOut("fast", function() {
                var img = new Image();
                $(img).load(function() {
                    $(".main").attr("src", newImgSrc)
                    $(".main").attr("id", 'mainImage_' + id);
                    currentImage = id;
                    $(".main").fadeIn("slow", function() {
                        $(this).parent().removeClass("loading");
                    });
                }).attr('src', newImgSrc);
            });
            
            
            $(".scroll-content-item img").removeClass("active");
            $("#galleryThumb_" + id + "").addClass("active");
            svalue = 100-((id / totalImageCount) * 100);

            if (sliderUse == true) { 
            $("#slider-vertical").slider('option', 'value', svalue);
            
            //move container start
            var difference = $("#scroll-content").height() - $("#scroll-pane").height(); //eg it's 200px longer var sliderVal = $("#slider-vertical").slider("value");
            var sliderVal = $("#slider-vertical").slider("value");
            var topValue = -((100 - sliderVal) * difference / 100);
            $("#scroll-content").css({ top: topValue }); //move the top up (negative value) by the percentage the slider has been moved times the difference in height
        }
            return
        }
    </script>
    

    
    
</asp:Content>
<asp:Content ID="Conent3" ContentPlaceHolderID="TextContent" runat="server">
    <acms:HtmlContentControlDisplay ID="acmsText" ControlName="Text" runat="server" />
    <acms:PdfContentControlDisplay ID="PdfContentControlDisplay"  runat="server" CssClass="PdfDownload" Target="_blank" ControlName="PDF Download" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
    <div id="image_wrap">
        <img class="main" src="<%= ResolveUrl("~/images/imageHolder.jpg") %>" />
    </div>

    <asp:ListView ID="listThumbs" DataSourceID="dsThumbs" runat="server" >
            <LayoutTemplate>
                <div id="scroll-pane"> 
                 <!-- root element for scrollable -->
                    <div id="scroll-content">
                        <asp:PlaceHolder ID="groupPlaceholder" runat="server"/>
                    </div>
                    
                    <div id="slider-wrap">
                        <div id="slider-vertical"></div>
                    </div>

                </div>
            </LayoutTemplate>
            
            <GroupTemplate>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </GroupTemplate>
            
            <ItemTemplate>
                <%--<acms:PostThumbnail runat="server"/>--%>
                <acms:ImageContentControlDisplay ID="ImageContentControlDisplay1" CssClass="scroll-content-item"  ControlName="Image" RenderWidth="35" runat="server" />
            </ItemTemplate>
            
        </asp:ListView>
    


    <acms:PostDataSource ID="dsThumbs" OnSelectData="dsThumbs_SelectData" runat="server" />
</asp:Content>
